<template>
  <div id="app">
    <el-row type="flex">
      <el-col :span="1.5"><el-button v-on:click="selecthml">index.hml</el-button></el-col>
      <el-col :span="1.5"><el-button v-on:click="selectjs">index.js</el-button></el-col>
      <el-col :span="1.5"><el-button v-on:click="selectcss">index.css</el-button></el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="1.5"><el-button v-on:click="launchPreviewer">预览</el-button></el-col>
      <el-col :span="1.5"><el-button v-on:click="shareCode">分享</el-button></el-col>
    </el-row>
    <el-container>
      <!-- <el-header> -->
        
      <!-- </el-header> -->
      <el-main>
        <el-input
          v-if="selectCode === 'hml'"
          type="textarea"
          :rows="2"
          placeholder="请输入index.hml"
          v-model="hmlCode">
        </el-input>
        <el-input
          v-if="selectCode === 'js'"
          type="textarea"
          :rows="2"
          placeholder="请输入index.js"
          v-model="jsCode">
        </el-input>
        <el-input
          v-if="selectCode === 'css'"
          type="textarea"
          :rows="2"
          placeholder="请输入index.css"
          v-model="cssCode">
        </el-input>
      </el-main>
    </el-container>
    <div>
      <iframe id="previewer-iframe" ref="iframe" :src="previewerSrc" class="previewer-iframe"> </iframe>
    </div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import "axios"
import axios from 'axios';

export default {
  name: 'app',
  // components: {
  //   HelloWorld
  // }
  data() {
    return {
      selectCode: "hml",
      hmlCode: "",
      jsCode: "",
      cssCode: "",

      previewerSrc: "",
      
      sessionId: "",
    };
  },

  mounted: function() {
    this.sessionId = localStorage.getItem("session-id");
    console.log("stored sessionId = " + this.sessionId, this.sessionId === 'null');
    if (this.sessionId === undefined || this.sessionId === null || this.sessionId === "" || this.sessionId === 'null') {
      this.requestSessionId();
      localStorage.setItem('session-id', this.sessionId);
    }
    console.log("stored sessionId = " + this.sessionId, this.sessionId === null);
  },

  methods: {
    selecthml() {
      console.log("select hml");
      this.selectCode = 'hml';
    },
    selectjs(){
      console.log("select js");
      this.selectCode = 'js';
    },
    selectcss(){
      console.log("select css");
      this.selectCode = 'css';
    },

    // launchPreviewer(){
    //   console.log("launch previewer");
    //   this.previewerSrc = "https://www.baidu.com"
    // },

    getPreviewerHostname(previewerKey) {
      return previewerKey + ".previewer.jnzhang.space"
    },

    getCgiHostname() {
      return "ohos-playground.jnzhang.space"
    },

    getUrl(path){
      return "http://" + this.getCgiHostname() + path;
    },

    http() {
      return axios.create({
        baseURL: '',
        changeOrigin: true,
        withCredentials: true,
      });
    },

    get(url) {
      return axios.get(url, {headers: {
        "session-id": this.sessionId
      }});
    },

    post(url, body) {
      return axios.post(url, body, {
        headers:{
          "session-id": this.sessionId
        }
      });
    },

    requestSessionId() {
      axios
      .get(this.getUrl('/api/session-id'))
      .then(rsp => {
        if (rsp.status != 200) {
          console.log("get session fail, status code not 200,", rsp.status, rsp.data);
          this.$message('get session fail, statuscode is' + rsp.status.toString());
          return;
        }
        if (rsp.data["code"] != 0) {
          console.log("get session fail, code is not 0,", rsp.data['code'], rsp.data['msg']);
          this.$message('get session fail, code = ' + rsp.status.toString() + ", msg = " + rsp.data.msg);
          return;
        }
        this.sessionId = rsp.data.data['session-id'];
        console.log("sessionId", this.sessionId);
        return
      })
    },

    launchPreviewer(){
      let Base64 = require('js-base64').Base64;
      let jsb64 = Base64.encode(this.jsCode);
      let cssb64 = Base64.encode(this.cssCode);
      let hmlb64 = Base64.encode(this.hmlCode);
      let data = {
        js: jsb64,
        hml: hmlb64,
        css: cssb64,
      };
      this.post(this.getUrl('/api/compile-code-b64'), JSON.stringify(data)).then(rsp => {
        if (rsp.status != 200) {
          console.log("get session fail, status code not 200,", rsp.status, rsp.data);
          this.$message('get session fail, statuscode is' + rsp.status.toString());
          return;
        }
        if (rsp.data.code != 0) {
          console.log("get session fail, code is not 0,", rsp.data['code'], rsp.data['msg']);
          this.$message('get session fail, code = ' + rsp.status.toString() + ", msg = " + rsp.data.msg);
          return;
        }
        let jsBundleId = rsp.data.data.jsBundleId;
        console.log("jsbundleid = ", jsBundleId);
        this.post(this.getUrl("/api/launch-previewer") + "?jsBundleId=" + jsBundleId, "").then(lrsp => {
          if (lrsp.status != 200) {
            console.log("get session fail, status code not 200,", lrsp.status, lrsp.data);
            this.$message('get session fail, statuscode is' + lrsp.status.toString());
            return;
          }
          if (lrsp.data.code != 0) {
            console.log("get session fail, code is not 0,", lrsp.data['code'], lrsp.data['msg']);
            this.$message('get session fail, code = ' + lrsp.status.toString() + ", msg = " + lrsp.data.msg);
            return;
          }
          let previewerKey = lrsp.data.data.previewerKey;
          console.log("previewer key = " + previewerKey);
          this.previewerSrc = "http://" + this.getPreviewerHostname(previewerKey);
        });
      });
    }, 

    shareCode(){},
  }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.previewer-iframe {
  width: 1000px;
  height: 1000px;
}
</style>
